<template>
	<navbar></navbar>
	<textNavbar myprops="关注律师"></textNavbar>
	<view class="guanz">
		<view class="tabs">
			<view v-for="(item,index) in dataList" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" @click="change">
						<template v-slot:title>
								<view class="profile">
									<image :src="item.image" mode="" style="width: 80rpx; height: 80rpx;" @click.stop="grxx(item)"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">{{item.name}}</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">执业{{item.num}}年</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答 <text style="color: red;">{{item.answerCount}}</text>次</text>
											<text class="text1">好评率 <text style="color: red;">{{item.rate}}</text></text>
											<text class="text1">感谢 <text style="color: red;">{{item.loveCount}}</text>个</text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one" @click="siwen">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one" @click="daixie">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one" @click="dianh">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one" @click="zhidao">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">畅聊指导</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one" @click="shencha">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one" @click="guwen">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">法律顾问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
		</view>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import tuiCollapse from "@/components/thorui/tui-collapse/tui-collapse.vue"
	import { myfollow } from "../../../utils/utils"
	export default {
		components:{
			tuiCollapse, tuiTabs
		},
		data() {
			return {
				image1: '../../../static/分组 11@1x.png',
				image2: '../../../static/分组 10@1x.png',
				dataList: [], // 初始数组
			}
		},
		onLoad() {
			myfollow((res) => {
				// console.log('关注列表', res.data.data);
				let arr = res.data.data
				let list = arr.map(item => ({
					...item,
					cunrrent: -1,
				}))
				this.dataList = list
				console.log(this.dataList);
			})
		}, 
		methods: {
			// 折叠面板逻辑
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
				// console.log(item);
			},
			// 点击l律师头像
			grxx (e) {
				// console.log(e);
				uni.navigateTo({
					url: `/pages/Attorney side/lawyerHome/lawyerHome?id=${e.id}`
				})
			},
			// 点击私问跳转
			siwen () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=私问&qian=20`
				})
			},
			// 点击文书代写跳转
			daixie () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=文书代写&qian=298`
				})
			},
			// 点击计时电话跳转
			dianh () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=计时电话&qian=39`
				})
			},
			// 点击畅聊指导跳转
			zhidao () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=畅聊指导&qian=80`
				})
			},
			// 点击合同审查跳转
			shencha () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=合同审查`
				})
			},
			// 点击法律顾问跳转
			guwen () {
				uni.navigateTo({
					url:`/pages/Attorney side/consult/consult?name=法律顾问&qian=398`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.guanz {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
		overflow: hidden;
	}
	
	.tabs {
		width: 100vw;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bbb {
		width: 95vw;
		margin-bottom: 6px;
		border-radius: 12px;
	}


	.profile {
		width: 600rpx;
		height: 72px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
	}
	
	.profile > image {
		width: 80rpx;
		height: 80rpx;
	}
	.profile-view {
		width: 450rpx;
		height: 66rpx;
		font-weight: bold;
		line-height: 32rpx;
		display: flex;
		flex-direction: column;
	}
	
	.text1 {
		font-size: 22rpx;
		line-height: 26rpx;
		color: #A6A6A6;
	}
	
	.profile-view-twotext {
		display: flex;
		justify-content: space-between;
	}
	
	.a1 {
		position: relative;
		top: 0;
		left: 30px;
	}
	
	.tui-content {
		background-color: white;
		display: flex;
		justify-content: center;
		// border-radius: 0 0 8px 8px;
		padding-bottom: 8px;
	}
	.profile-six {
		width: 668rpx;
		height: 128rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-six-one {
		width: 108rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background-color: #EFEFEF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.profile-six-one-text1 {
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		color: #383838;
		margin: 8rpx 0 0 4rpx;
	}
	
	.lay-img {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 24rpx;
		bottom: 20rpx;
	}
	
</style>
